import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

/**
 * 将 HTML 字符串导出为 A4 大小的 PDF（支持分页）或直接调用浏览器打印
 * @param {string} htmlString - HTML 内容字符串
 * @param {string} fileName - 导出的 PDF 文件名
 * @param {boolean} useBrowserPrint - 如果为 true，则直接触发浏览器打印
 */
export async function exportHtmlToPDF(htmlString, fileName = '导出文件.pdf', useBrowserPrint = false) {
    // 创建一个隐藏的 DOM 容器
    const container = document.createElement('div')
    container.id = 'pdf-render-temp'
    container.innerHTML = htmlString
    container.style.position = 'fixed'
    container.style.top = '-9999px'
    container.style.left = '-9999px'
    container.style.zIndex = '-1'
    container.style.width = '794px' // 对应 A4 宽度（px）
    container.style.background = '#fff'
    document.body.appendChild(container)

    try {
        if (useBrowserPrint) {
            // 调用浏览器打印
            container.style.position = 'static'
            container.style.top = ''
            container.style.left = ''
            container.style.zIndex = '9999'
            container.style.width = '100%'

            // 打印前将其显示
            const printWindow = window.open('', '_blank')
            if (printWindow) {
                printWindow.document.write(`
          <html>
            <head>
              <title>${fileName}</title>
            </head>
            <body>${container.innerHTML}</body>
          </html>
        `)
                printWindow.document.close()
                printWindow.focus()
                printWindow.print()
            } else {
                console.warn('无法打开新窗口进行打印。')
            }
            return
        }

        // 否则生成 PDF
        const scale = 2
        const canvas = await html2canvas(container, {
            scale,
            useCORS: true,
            allowTaint: true
        })

        const imgData = canvas.toDataURL('image/jpeg', 1.0)
        const imgWidth = 595.28 // A4 纸宽度 pt（72dpi）
        const pageHeight = 841.89 // A4 纸高度 pt（72dpi）

        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const imgHeight = (imgWidth / contentWidth) * contentHeight

        let position = 0
        const pdf = new jsPDF('p', 'pt', 'a4')

        if (imgHeight <= pageHeight) {
            pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
            while (position < imgHeight) {
                pdf.addImage(imgData, 'JPEG', 0, -position, imgWidth, imgHeight)
                position += pageHeight
                if (position < imgHeight) pdf.addPage()
            }
        }

        pdf.save(fileName)
    } catch (e) {
        console.error('导出 PDF 出错:', e)
    } finally {
        document.body.removeChild(container)
    }
}


// // 使用示例1：
// import { exportHtmlToPDF } from '@/utils/exportHtmlToPDF.js'

// // 示例数据
// const tableData = ref([
//     { school: '北京大学', group: '01', name: '李北1', idCard: '422425197910205292', phone: '15168200269', job: '会计' },
//     { school: '北京大学', group: '01', name: '王北1', idCard: '422425197910205292', phone: '15168200269', job: '出纳' },
//     { school: '北京大学', group: '01', name: '张北1', idCard: '422425197910205292', phone: '15168200269', job: '税务' },
//     { school: '浙江大学', group: '02', name: '刘浙2', idCard: '422425197910205292', phone: '15168200269', job: '会计' },
//     { school: '浙江大学', group: '02', name: '李浙2', idCard: '422425197910205292', phone: '15168200269', job: '出纳' },
//     { school: '浙江大学', group: '02', name: '张浙2', idCard: '422425197910205292', phone: '15168200269', job: '税务' },
//     { school: '清华大学', group: '02', name: '张清2', idCard: '422425197910205292', phone: '15168200269', job: '会计' },
//     { school: '清华大学', group: '02', name: '李清2', idCard: '422425197910205292', phone: '15168200269', job: '出纳' },
//     { school: '北京大学', group: '02', name: '黄北2', idCard: '422425197910205292', phone: '15168200269', job: '税务' },
//     { school: '浙江大学', group: '01', name: '梅浙1', idCard: '422425197910205292', phone: '15168200269', job: '会计' },
//     { school: '浙江大学', group: '01', name: '李浙1', idCard: '422425197910205292', phone: '15168200269', job: '出纳' },
//     { school: '浙江大学', group: '01', name: '开浙1', idCard: '422425197910205292', phone: '15168200269', job: '税务' },
//     { school: '清华大学', group: '03', name: '张清3', idCard: '422425197910205292', phone: '15168200269', job: '会计' },
//     { school: '清华大学', group: '03', name: '包清3', idCard: '422425197910205292', phone: '15168200269', job: '出纳' },
// ])


// // 排序并生成 HTML（学校优先，组号次之）
// function generateMergedTableHTML(data) {
//     // 先排序：按 school（学校）-> group（组号）
//     const sortedData = [...data].sort((a, b) => {
//         if (a.school === b.school) {
//             return a.group.localeCompare(b.group)
//         }
//         return a.school.localeCompare(b.school)
//     })

//     // 分组：school-group 为 key
//     const grouped = {}
//     sortedData.forEach(row => {
//         const key = `${row.school}-${row.group}`
//         if (!grouped[key]) {
//             grouped[key] = []
//         }
//         grouped[key].push(row)
//     })

//     // 开始构建整体HTML
//     let html = `
//     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; font-size: 16px;">
//   `

//     for (const key in grouped) {
//         const rows = grouped[key]
//         const rowspan = rows.length
//         const [school, group] = key.split('-')

//         // 单个小表格块，去掉了最外层 div 的边框
//         html += `
//       <div style="padding: 10px;">
//         <table style="width: 100%; border-collapse: collapse; font-size: 16px; text-align: center;">
//           <thead>
//             <tr>
//               <th style="border: 1px solid #000; padding: 4px;">学校</th>
//               <th style="border: 1px solid #000; padding: 4px;">组号</th>
//               <th style="border: 1px solid #000; padding: 4px;">姓名</th>
//             </tr>
//           </thead>
//           <tbody>
//     `
//         rows.forEach((row, index) => {
//             html += '<tr>'
//             if (index === 0) {
//                 html += `<td rowspan="${rowspan}" style="border: 1px solid #000; padding: 4px;">${school}</td>`
//                 html += `<td rowspan="${rowspan}" style="border: 1px solid #000; padding: 4px;">${group}</td>`
//             }
//             html += `<td style="border: 1px solid #000; padding: 4px;">${row.name}</td>`
//             html += '</tr>'
//         })

//         html += `
//           </tbody>
//         </table>
//       </div>
//     `
//     }

//     html += `</div>`
//     return html
// }

// //打印组号
// function printGroup() {
//     const htmlString = generateMergedTableHTML(tableData.value)
//     // exportHtmlToPDF(htmlString, '学生名单导出.pdf')//1.生成 PDF 文件下载
//     exportHtmlToPDF(htmlString, '学生名单导出.pdf', true)//2.直接浏览器打印
// }